import React, { Component } from 'react';
import { NavBar, Icon, Toast } from 'antd-mobile'
// import SearchInput from '../SearchInput/SearchInput'
import { withRouter } from 'react-router-dom'
import "./ProductList.scss"
import { getProductListData } from '../data/api'
class ProductList extends Component {
  // 请求加载的状态位
  query = "";
  pagenum = 1;
  total = 0;//页码的总数
  pageSize = 20;//每页条数
  state = {
    activeTab: "overall",//综合
    goods: [],//商品列表
  }
  handleTabClick = (e) => {
    let activeTab = e.target.dataset["tab"]
    this.setState(() => {
      return {
        activeTab: activeTab
      }
    }
    )
  };
  componentDidMount() {
    // console.log(this);
    let that = this
    let search = this.props.location.search || ""
    let query = search.split("=")[1];
    this.query = query
    this.getProductList();
    // 监听串口滚动事件
    window.addEventListener("scroll", this.handleScroll)
  }
  componentWillUnmount(){
    window.removeEventListener("scroll",this.handleScroll)
  }
  handleScroll = (params) => {
    let element = document.documentElement;
    let scrollHeight = element.scrollHeight;
    // console.log("窗口可以滚动的高度",scrollHeight);
    let scrollTop = element.scrollTop;
    // console.log("已经滚动的距离",scrollTop);
    let clientHeight = element.clientHeight;
    // console.log("窗口的高度",clientHeight);
    if (scrollHeight - scrollTop - clientHeight < 10) {
      // console.log("列表已经触底啦");
      // 发请求拿数据
      this.getProductList();
    }
  }
  //获取产品数据列表
  getProductList = async () => {
    if(!this.loading){
      if (this.total === 0 || Math.ceil(this.total / this.pageSize) > this.pagenum) {
        console.log(this.total, this.pageSize, this.pagenum);
        let params = {
          pagenum: this.pagenum++
        };
        if (this.query) {
          params.query = decodeURIComponent(this.query)
        }
        if (this.cid) {
          params.cid = this.cid
        }
        let result = await getProductListData(params);
        console.log(result);
        this.total = result.message.total;
        console.log(this.total);
        // this.pagenum=result.pagenum || 1
        this.setState({
          goods: [...this.state.goods, ...result.message.goods]
        });
      } else {
        Toast.info("已经到最后一页了")
      }
    }
  }
  //跳转到商品详情
  handleListClick = (goods_id) => {
    this.props.history.push("goodDetail?goods_id=" + goods_id)
  }

  render() {
    return (
      <div className="zffProductList">
        <NavBar
          onLeftClick={() => {
            this.props.history.go(-1)
          }
          }
          icon={<Icon type="left" />}
        >
          商品列表
        </NavBar>
        {/* <SearchInput></SearchInput> */}
        {/* tab切换开始 时间委托处理点击事件*/}
        <div className="ProductListTabs" onClick={this.handleTabClick}>
          <div data-tab="overall" className={this.state.activeTab === "overall" ? "tabsItem active" : "tabsItem"}>综合</div>
          <div data-tab="sale" className={this.state.activeTab === "sale" ? "tabsItem active" : "tabsItem"}>销量</div>
          <div data-tab="price" className={this.state.activeTab === "price" ? "tabsItem active" : "tabsItem"}>价格</div>
        </div>
        <div className="tabItemContent">
          <div className={this.state.activeTab === "overall" ? "" : "hidden"}>
            {
              this.state.goods.map(v => {
                return <div className="goodsListItem" onClick={this.handleListClick.bind(this, v.goods_id)} key={v.goods_id}>
                  <div className="listItemLeft">
                    <img src={v.goods_small_logo} alt="" />
                  </div>
                  <div className="listItemRight">
                    <div className="itemRightTop">
                      {v.goods_name}
                    </div>
                    <div className="itemRightBottom">
                      ￥{v.goods_price}
                    </div>
                  </div>
                </div>
              })
            }
          </div>
          <div className={this.state.activeTab === "sale" ? "" : "hidden"}>2</div>
          <div className={this.state.activeTab === "price" ? "" : "hidden"}>3</div>
        </div>
        {/* tab切换结束 */}
      </div>
    );
  }
}

export default withRouter(ProductList);
